<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>野火IM</title>
    <link rel="icon" href="./assets/images/icon.png" sizes="32x32">

    <style>
        .styled_video_container {
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -999;
            transform: translateX(-50%) translateY(-50%);
            background-size: cover;
            transition: 1s opacity;
        }
    </style>

</head>

<body>
    <div id="styled_video_container" class="styled_video_container">
        <video class="styled_video_container" id="bgvid" playsinline autoplay muted loop>
            <!-- <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
            <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> -->
        </video>
    </div>

    <div id="root">
    </div>
    <script>
        if (!HTMLCanvasElement.prototype.toBlob) {
            Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                value: function (callback, type, quality) {
                    var dataURL = this.toDataURL(type, quality).split(',')[1];
                    setTimeout(function() {

                        var binStr = atob( dataURL ),
                            len = binStr.length,
                            arr = new Uint8Array(len);

                        for (var i = 0; i < len; i++ ) {
                            arr[i] = binStr.charCodeAt(i);
                        }

                        callback( new Blob( [arr], {type: type || 'image/png'} ) );

                    });
                }
            });
        }

        let script = document.createElement('script');

        script.async = '';
        script.src = './app.js';

        document.body.appendChild(script);
    </script>
</body>

</html>
